import Preparation from '../../shared/preparation.md'

# React

在这篇文档中，你可以了解到如何基于 Emp 来构建一个 React 应用。

<Preparation />

## 创建 React 项目

你可以使用 `create-emp` 来创建一个 Emp + React 的项目，调用以下命令：

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="create emp@latest" />

然后在 `Select framework` 时选择 `React` 即可。

## 安装依赖
在创建完项目后，我们进入代码的根目录，安装项目依赖，推荐使用`PNPM`进行安装：

<PackageManagerTabs command="install" />

## 运行 React 项目
在安装完项目依赖后，启动项目：

<PackageManagerTabs command="dev" />

运行成功后，您可以访问`http://localhost:8000/`进行查看

## 目录约定

```
── node_modules        // 依赖目录
├── src                 
|   ├── App.css         // 应用样式文件
|   ├── App.tsx         // 应用主组件
|   ├── boostrap.tsx    // 项目入口文件
|   └── index.ts        // 主要入口文件
├── .gitignore          // Git忽略文件列表
├── emp-config.js       // emp配置文件
├── package.json        // 项目依赖及配置信息
├── tsconfig.json       // TypeScript配置文件
└── README.md           // 项目说明文档
```
